<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('车辆轨迹信息列表')" />
</head>
<style>
    .select-list li p, .select-list li label:not(.radio-box){
        width: 91px;
    }
</style>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
<!--            <div class="col-sm-12 search-collapse">-->
<!--                <form id="formId">-->
<!--                    <div class="select-list">-->
<!--                        <ul>-->
<!--                            <li>-->
<!--                                <label>车牌号码：</label>-->
<!--                                <input type="text" name="carNum"/>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <label>车辆开始时间：</label>-->
<!--                                <input type="text" class="time-input" placeholder="请选择车辆开始时间" name="trailStart"/>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <label>预计结束时间：</label>-->
<!--                                <input type="text" class="time-input" placeholder="请选择预计结束时间" name="trailYujiEnd"/>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <label>实际结束时间：</label>-->
<!--                                <input type="text" class="time-input" placeholder="请选择实际结束时间" name="trailEnd"/>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <label>轨迹状态：</label>-->
<!--                                <select name="isState" th:with="type=${@dict.getType('is_state')}">-->
<!--                                    <option value="">所有</option>-->
<!--                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
<!--                                </select>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->

            <div class="col-sm-12 select-table table-striped">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>车流量统计</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">选项1</a>
                                    </li>
                                    <li><a href="#">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-bar-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('trail:trail:edit')}]];
        var removeFlag = [[${@permission.hasPermi('trail:trail:remove')}]];
        var isState = [[${@dict.getType('is_state')}]];
        var prefix = ctx + "trail/trail";

        $(function() {
            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
            var baroption = {
                title : {
                    text: '车流量统计(辆)'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['车流量(辆)']
                },
                grid:{
                    x:30,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['2022/01/01','2022/01/02','2022/01/03','2022/01/04','2022/01/05','2022/01/06','2022/01/07','2022/01/08','2022/01/09'
                            ,'2022/01/10','2022/01/11','2022/01/12','2022/01/13','2022/01/14','2022/01/15','2022/01/16','2022/01/17','2022/01/18'
                            ,'2022/01/19','2022/01/20','2022/01/21','2022/01/22','2022/01/23','2022/01/24','2022/01/25','2022/01/26','2022/01/27'
                            ,'2022/01/28','2022/01/29','2022/01/30','2022/01/31']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'车流量(辆)',
                        type:'bar',
                        data:[2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2,2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2,2, 5, 9, 26, 28, 70, 175],
                        color:'#3c8dbc',
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            barChart.setOption(baroption);
            window.onresize = barChart.resize;
        });
    </script>
</body>
</html>